<template>

    <el-form ref="addRoleFormRef" :rules="roleData.form_rules" :model="roleData.form" label-width="110px">
        <el-form-item label="角色名称" size="large" prop="roleName">
            <el-input size="large" v-model="roleData.form.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
            <el-input size="large" v-model="roleData.form.description" placeholder="请输入角色描述"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
            <el-input size="large" v-model="roleData.form.sort" placeholder="数字越大越靠前"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
    </el-form>

</template>

<script setup>

import { reactive , getCurrentInstance } from 'vue';

// api
import { addRole } from "@/api/role"

const { proxy } = getCurrentInstance();

const roleData = reactive({
    form: {
        roleName: "",
        description: "",
        sort: 0
    },
    form_rules: {
        roleName: [
            {
                required: true,
                message: "请输入角色名称",
                trigger: 'blur'
            }
        ]
    }
})

const submitForm = () => {

    proxy.$refs.addRoleFormRef.validate(async (valid) => {
        if (!valid) {
            return ;
        }
        const data = await addRole(roleData.form)
        console.log("结果：", data)
    })

}

const resetForm = () => {
    proxy.$refs.addRoleFormRef.resetFields()
}

</script>

<style lang="scss" scoped>

</style>